#set( $symbol_pound = '#' )
#set( $symbol_dollar = '$' )
#set( $symbol_escape = '\' )
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Client Side Pagination in TreeGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Client Side Pagination in TreeGrid</h2>

<p>This sample shows how to implement client side pagination in TreeGrid.</p>

<div style="margin:20px 0;"></div>
<table id="tg" title="Client Side Pagination" style="width:700px;height:250px"
       data-options="
				iconCls: 'icon-ok',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				url: 'treegrid_data2.json',
				method: 'get',
				idField: 'id',
				treeField: 'name',
				pagination: true,
				pageSize: 2,
				pageList: [2,5,10]
			">
    <thead>
    <tr>
        <th data-options="field:'name',width:180">Task Name</th>
        <th data-options="field:'persons',width:60,align:'right'">Persons</th>
        <th data-options="field:'begin',width:80">Begin Date</th>
        <th data-options="field:'end',width:80">End Date</th>
        <th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
    </tr>
    </thead>
</table>
<script type="text/javascript">
    (function (${symbol_dollar}) {
        function pagerFilter(data) {
            if (${symbol_dollar}.
            isArray(data)
        )
            {    // is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = ${symbol_dollar}(this);
            var state = dg.data('treegrid');
            var opts = dg.treegrid('options');
            var pager = dg.treegrid('getPager');
            pager.pagination({
                onSelectPage: function (pageNum, pageSize) {
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh', {
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });
                    dg.treegrid('loadData', state.originalRows);
                }
            });
            if (!state.originalRows) {
                state.originalRows = data.rows;
            }
            var topRows = [];
            var childRows = [];
            ${symbol_dollar}
        .
            map(state.originalRows, function (row) {
                row._parentId ? childRows.push(row) : topRows.push(row);
            });
            data.total = topRows.length;
            var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows =
            ${symbol_dollar}
        .
            extend(true, [], topRows.slice(start, end).concat(childRows));
            return data;
        }

        var appendMethod =
        ${symbol_dollar}
        .
        fn.treegrid.methods.append;
        var loadDataMethod =
        ${symbol_dollar}
        .
        fn.treegrid.methods.loadData;
        ${symbol_dollar}
        .
        extend(${symbol_dollar}.fn.treegrid.methods, {
            clientPaging: function (jq) {
                return jq.each(function () {
                    var state = ${symbol_dollar}(this).data('treegrid');
                    var opts = state.options;
                    opts.loadFilter = pagerFilter;
                    var onBeforeLoad = opts.onBeforeLoad;
                    opts.onBeforeLoad = function (row, param) {
                        state.originalRows = null;
                        onBeforeLoad.call(this, row, param);
                    }
                        ${symbol_dollar}(this).treegrid('loadData', state.data);
                    ${symbol_dollar}
                    (this).treegrid('reload');
                });
            },
            loadData: function (jq, data) {
                jq.each(function () {
                    ${symbol_dollar}
                    (this).data('treegrid').originalRows = null;
                });
                return loadDataMethod.call(${symbol_dollar}.fn.treegrid.methods, jq, data
                )
                ;
            },
            append: function (jq, param) {
                return jq.each(function () {
                    var state = ${symbol_dollar}(this).data('treegrid');
                    if (state.options.loadFilter == pagerFilter) {
                        ${symbol_dollar}
                    .
                        map(param.data, function (row) {
                            row._parentId = row._parentId || param.parent;
                            state.originalRows.push(row);
                        });
                        ${symbol_dollar}
                        (this).treegrid('loadData', state.originalRows);
                    } else {
                        appendMethod.call(${symbol_dollar}.fn.treegrid.methods, jq, param
                    )
                        ;
                    }
                })
            }
        }
        )
        ;

    })(jQuery);

    function formatProgress(value) {
        if (value) {
            var s = '<div style="width:100%;border:1px solid ${symbol_pound}ccc">' +
                    '<div style="width:' + value + '%;background:${symbol_pound}cc0000;color:${symbol_pound}fff">' + value + '%' + '</div>'
            '</div>';
            return s;
        } else {
            return '';
        }
    }

    ${symbol_dollar}
    (function () {
        ${symbol_dollar}
        ('${symbol_pound}tg').treegrid().treegrid('clientPaging');
    })
</script>
</body>
</html>